<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="css/1.css">
</head>
<body>
    <div id="mark">
        <h2 style="position: absolute;top: 1px;left : 5%;font-family: 'Courier New', Courier, monospace;">
            <h3 v-bind:style="{position: position,left: left}">
            </h3>        </h2>
        <h2 style="position: absolute;top:1px;left: 9%;font-size: 18.5px;">
            高校内部权力运行数据库网
        </h2>
        <p style="position: absolute;left: 9%;top: 3%;">
            Operation of University Internal Powers Datebase
        </p>
        <p style="position: absolute;left: 80%;top: 0;">
            会员登录|注册|收藏本站|设为首页
        </p>
        <p style="position: absolute;left: 75%;top: 25px;">

            最新通知：<marquee direction="right" behavior="scroll" scrollamount="5" width="200px" height="20px">
                最新通知</marquee>
        </p>

        <div class="cen">
            <div class="text">
                <a href="index.html" style="position: absolute;
                            left: 12%;
                            text-decoration: none;
                            top: 6px;
                            font-size: 20px;
                            color: silver;">
                    首页
                </a>
                <a href=" 2-0.html" style="position: absolute;
                             left: 18%;
                             text-decoration: none;
                             top: 6px;
                             font-size: 20px;
                             color: silver;">
                    学术动态
                </a>
                <a href="2-1.html" style="position: absolute;
                             left: 26%;
                             text-decoration: none;
                             font-size: 20px;
                             top: 6px;color: silver;">
                    文献库
                </a>
                <a href="2-0.html " style="position: absolute;
                             left: 33%;
                             text-decoration: none;
                             font-size: 20px;
                             top: 6px;color: silver;">
                    文件库
                </a>
                <a href=" 2-0.html" style="position: absolute;
                             left: 41%;
                             text-decoration: none;
                             font-size: 20px;
                             top: 6px;color: silver;">
                    案例库
                </a>
                <a href=" 2-0.html" style="position: absolute;
                             left: 48%;
                             text-decoration: none;
                             font-size: 20px;
                             top: 6px;color: silver;">
                    关于我们
                </a>
                <a href="2-0.html " style="position: absolute;
                      left: 58%;
                      text-decoration: none;
                      font-size: 20px;
                      top: 6px;color: silver;">
                    联系我们
                </a>
                <input type="text" placeholder="请输入关键字" class="word">
                <button @click="search" value="搜索"
                    style="position: absolute;left: 83%;width: 50px;height: 20px;font-size: 12px;top: 10px;">
                    查找
                </button>
            </div>
        </div>
        <div id="pic">
            <!--图片-->
            <img :src="imgArr[index]" class="center">
            <!--左箭头-->
            <a v-show="index!=0" @click="prev" class="left">
                <img src="images/prev.png">
            </a>
            <!--右箭头-->
            <a v-show="index<imgArr.length-1" @click="next" class="right">
                <img src="images/next.png">
            </a>
        </div>

        <div class="one">
            <div class="one-top"></div>
            <div class="one-center">
                学术动态
            </div>
            <div class="one-word">
                <div class="images"></div>
                <div class="fu">
                  <a href="https://www.tsinghua.edu.cn/news/zttj/zsjkcqh.htm">习近平考察清华大学</a>
                </div>
            </div>
            <div class="one-words">
                <br>
                &nbsp&nbsp 庆祝清华大学建校100周年
            </div>
            <div class="one-wordss">
                <br>
                &nbsp&nbsp 庆祝建党百年
            </div>
            <div class="one-wordsss">
                <br>
                &nbsp&nbsp 欢迎你，新同学！！！
            </div>
            </div>
            <div class="two">
                <div class="two-top"></div>
                <div class="two-center">
                    文献库
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <a href="https://www.cnki.net/">国内文献库</a> | <a href="https://www.cnki.net/">国外文献库</a> 
                </div>
                <div class="two-word">
                   <a href="http://lib.tsinghua.edu.cn/info/1077/4316.htm">Maruzen三田文学数据库开通试用</a>
                     <br>
                   &nbsp&nbspRoutledge Maruzen三田文学数据库开通试用Maruzen三田文学数据库开通试用Maruzen三田文学数据库开通试用...
                    <hr>
                </div>
                <div class="two-words">
                    <a href="http://news.bjfu.edu.cn/ztbd/gjjyksygflfg/262938.html">Routledge Encyclopedia of Philosophy（Routledge哲学百科数据库)</a>
                    <br>
                    &nbsp&nbsp outledge 在线哲学百科全书拥有超过 2,800 余篇文章，顾问编辑是剑桥大学哲学系主任Tim Crane，编辑团队由 30 多个学科的专家组成...
                    <hr>
                </div>
                <div class="two-wordss">
                   <a href="http://www.gov.cn/flfg/2012-05/14/content_2136483.htm">CRC CHEMnetBASE （CRC化学词典数据库）</a>
                    <br>
                    <br>
                    &nbsp&nbsp CHEMnet BASE由互动式资料库与词典集合而成， 研究人员可以使用多种条件（包括结构式检索） ...
                    <hr>
                </div>
            </div>
            <div class="three">
                <div class="three-top"></div>
                <div class="three-center">
                    案例库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;正面经验|反面案例
                </div>
                <div class="three-word">
                </div><br><br>
                <h4>
                    &nbsp&nbsp <a href="https://www.tsinghua.edu.cn/info/1173/86844.htm">赵家和：晚霞光暖人间</a> </h4>
                <div class="three-words">
                    &nbsp&nbsp 立足三尺讲台 启程教师生涯
                </div>
                <br>
                <br>
                <div class="three-words">
                    &nbsp&nbsp 清华牵头设计的高温气冷堆核电站今日临界
                </div>
                <br>
                <br>
                <div class="three-words">
                    &nbsp&nbsp 最新消息
                </div>
              <div class="three-wordss">
                    &nbsp&nbsp 最新消息
                </div>
                <div class="three-wordsss">
                    &nbsp&nbsp 最新消息最新消息
                </div>
                <div class="three-wordssss">
                    &nbsp&nbsp 最新消息最新消息最新消息
                </div>
            </div>
        <div class="four">
            <div class="four-top"></div>
                <div class="four-center">
                  文件库&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                  <a href="http://www.gov.cn/zhengce/wenjian/zhongyang.htm" align="right">国家文件</a>
                  |<a href="http://www.zj.gov.cn">省级文件</a>
                  |<a href="http://www.tj.gov.cn/zwgk/sjzcwjk/">市级文件</a> 
                </div>
                <br>
                &nbsp&nbsp&nbsp <a href="https://www.ccdi.gov.cn/special/xstl/yw_xstl/201508/t20150814_60554.html">中共中央印发《中国共产党巡视工作条例》</a> 
                <hr style="border : 1px dashed rgb(21, 20, 24);">
                &nbsp&nbsp&nbsp <a href="https://www.tsinghua.edu.cn/xxgk.htm">自强成就卓越 创新塑造未来</a>
                <hr style="border : 1px dashed rgb(18, 18, 24);">
                &nbsp&nbsp&nbsp中共中央印发《中国共产党巡视工作条例》
                <hr style="border : 1px dashed rgb(15, 15, 20);">
                &nbsp&nbsp&nbsp中共中央印发《中国共产党巡视工作条例》
                <hr style="border : 1px dashed rgb(23, 23, 29);">
        </div>
        <div class="bottom">
            <br>
            网站声明|联系我们|关于我们
            <br>
            技术支持：天津职业技术科技有限公司|管理登录
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#pic',
            data: {
                imgArr: [
                    "./images/1.jpg",
                    "./images/2.jpg",
                    "./images/3.png",
                    "./images/4.jpg",
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        })
    </script>
</body>

</html>